<script setup>
// 函数式编程风格，，属性定义 
// 01- defineProps 用来声明组合对外的属性 （就是写在HTML 标签上面的属性）
import { ref } from 'vue'
// 02- 生命周期：引入组合式API
// 与 选项式的API 
//    1 多了2个字母 on 
//    2 第一个字母大写
import { 
  onMounted, onBeforeMount,
  onUpdated, onBeforeUpdate,
  onUnmounted, onBeforeUnmount,
} from 'vue'

// 03-watch-监听属性的变化 
import  { watch } from 'vue'

// 04- computed 计算类型的属性
import { computed } from 'vue'
// 
defineProps({
  // 01-01 声明 msg 属性
  // 'title': String,

  // 01-02 带默认值
  'title':{
    type: String,
    default: '我是默认的标题。',
    required: true,
  }
})
// this 指针， 不能访问！！
// this 指针， 不能访问！！
// this 指针， 不能访问！！
// setup 在组件 new 之前被执行的，所以不能访问 this  
console.log("组合式API 的 this 指针 -> ", this)


// 02 - 定义组件内部属性（就相当于是声明一个局部变量）
//  通过 ref() 使用传过去的参数变成响应式的。

const count = ref(0)  // count 是响应式的

let count1 = 0    // count1 不是响应式的

// 02- 生命周期
// onMounted( 回调函数 )
// 当组件的生命周期被触发了，就会执行 回调函数
onMounted( ()=>{
  console.log("HelloWorld 组件挂载完成。。onMounted")
} )
onUpdated( ()=>{
  console.log("HelloWorld 组件 重新渲染了一次。onUpdated")
})
onUnmounted( ()=>{
  console.log("HelloWorld 组件被销毁 onUnmounted")
})
onBeforeUpdate(()=>{
  console.log("组件 准备更新DOM")
})


// watch 监听属性变化 
// watch(属性 , 回调函数)  当属性发生了变化 的时候，会触发回调函数的执行
// 属性 必需是响应式的，不能是普通变量。
watch( count, (val, oldValue)=>{
   console.log("组件的属性 count 发生了变化", oldValue, " -> ", val)
})
// watch( count1, ()=>{
//   console.log(" count1 发生了变化")
// })

// 04 computed 计算类型的属性
// 通过 根据现有的 响应式属性生成新属性值
// computed() 的返回值 是一个新的响应式的 属性实例
// 
const count100 = computed(()=>{
  // 此函数内至少需要有一个 【响应式的】 属性参与计算过程。
  return count.value * 100;
})

// 因为 count1 是 不响应的，
//    但是我们点击 【点我】 按钮触发了值的变化 但不会更新 DOM ，不会触发 组件的渲染过程(render)。
// 点击 【计算器】 按钮 的时候，count 值 发生了变化 ，
//    触发了组件的渲染过程。DOM 重新渲染了（使用cout1的新值）

</script>

<!-- 选项式API中的用法 -->
<!--
<script>
import { onMounted } from 'vue'
export default {
  setup(){
    onMounted(function(){
      console.log("这是选项式API中的setup 函数")
    })
  },
  watch:{
    // "属性名": 回调
  },
  props:{
    'title': String,
  },
  created(){
    // ....
  }
}
</script>  -->

<template>
  <h3>{{ title }}</h3>
  <h3>计算类型的 计数器 {{ count100 }}</h3>

  <!-- count1 不是响应式的，变化不会 触发组件的重新渲染 -->
  <button type="button" @click="count1++">点我: {{ count1 }}</button>

  <!-- count 是响应式的，变化会 触发了组件的渲染过程。更新DOM -->
  <button type="button" @click="count++">计数器 count is: {{ count }}</button>

</template>

<style scoped >
a {
  color: #42b983;
}
button {
  padding: 5px;
  margin-right: 10px;
}
</style>
